﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>7天天气预报</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="axios.min.js"></script>
</head>

<body>
  <div id="app">
    <div class="hello">
      <h2>{{city}}</h2>
      <h4>今天:{{date}} {{week}}</h4>
      <h4>{{message}}</h4>
      <ul>
        <li v-for="item in obj">
          <div>
            <h3>{{item.date}}</h3>
            <h3>{{item.week}}</h3>
            <img :src="get(item.wea_img)" alt="">
            <h3>{{item.wea}}</h3>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <script>
    const vm = Vue.createApp({
      name: 'HelloWorld',
      data() {
        return {
          city: "",
          obj: [],
          date: "",
          week: "",
          message: ""
        }
      },
      methods: {
        //定义get方法，拼接图片的路径
        get(sky) {
          return "https://xintai.xianguomall.com/skin/pitaya/" + sky + ".png"
        }
      },
      created() {
        var that = this;
        axios.get("http://gfeljm.tianqiapi.com/api?unescape=1&version=v9&appid=94671344&appsecret=dK4nkK33&city=北京")
          .then(function (response) {
            //处理数据
            that.city = response.data.city;
            that.obj = response.data.data;
            that.date = response.data.data[0].date;
            that.week = response.data.data[0].week;
            that.message = response.data.data[0].air_tips;
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    }).mount("#app");
  </script>
  <style scoped>
    h2,
    h4 {
      text-align: center;
    }

    li {
      float: left;
      list-style-type: none;
      width: 200px;
      text-align: center;
      border: 1px solid red;
    }
  </style>
  </div>
</body>

</html>